<template>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type GetMainMenuItemsParams, type GridOptions } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'
import json from './data/cus-cmp.json'
import MenuItem from './components/menuItem.vue'

const gridOptions = ref<GridOptions<IOlympicData>>({
  rowData: json,
  columnDefs: [
    // 行 文字居中
    {
      field: 'name',
      filter: 'agTextColumnFilter',
      // 锁定 选择列的选项
      lockVisible: true,
      // 隐藏列
      initialHide: false,
    },
    { field: 'age' },
    { field: 'gender' },
    { field: 'phone' },
    { field: 'email' },
    { field: 'address' },
    { field: 'company' },
  ],
  defaultColDef: {
    flex: 1,
  },
  enableCellSpan: true,
  suppressExcelExport: true, // 关闭 Excel 导出
  suppressCsvExport: true, // 关闭 CSV 导出
  // suppressMenuHide: true, // 是否隐藏菜单
  // suppressContextMenu: true, // 是否禁用右键菜单
  getMainMenuItems: (params: GetMainMenuItemsParams) => {
    return [
      ...params.defaultItems,
      "separator",
      {
        name: "clickCloseMenu",
        menuItem: "MenuItem",
        menuItemParams: {
          buttonValue: "关闭菜单",
        },
      },
      {
        name: "clickMenuKeepOpen",
        suppressCloseOnSelect: true,
        menuItem: "MenuItem",
        menuItemParams: {
          buttonValue: "保持打开",
        },
      },
    ];
  },
  getContextMenuItems: (itemParams) => {
    if (!itemParams.column)
      return [];
    return [
      ...(itemParams.defaultItems || []),
      // "separator",
      {
        name: "clickCloseMenu",
        menuItem: "MenuItem",
        menuItemParams: {
          text: "关闭菜单",
          buttonValue: "弹窗",
        },
      },
      {
        name: "clickMenuKeepOpen",
        suppressCloseOnSelect: true,
        menuItem: "MenuItem",
        menuItemParams: {
          text: "保持菜单",
          buttonValue: "弹窗",
        },
      },
    ];
  }
})

defineExpose({
  MenuItem
})
</script>

<style scoped></style>
